<script lang="ts" setup>
import pageHeader from "@/components/pageHeader.vue";
import { onMounted, ref } from "vue";
import { meMyInvitList } from "@/api/games";
import moment from "moment";
import navTo from "@/utils/navTo";
import noData from "@/components/noData.vue";
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(15);
const loading = ref(false);
const finished = ref(false);
const isRequest = ref(false);

const getMyInvitList = async () => {
  try {
    isRequest.value = true;
    let res = await meMyInvitList({
      page: 1,
      rows: 10,
    });
    console.log("meMyInvitList---", res.value);
    isRequest.value = false;
    listData.value = listData.value.concat(res.value.data.rows || []);
    if (listData.value.length == Number(res.value.data.total)) {
      finished.value = true;
    } else {
      pageNum.value++;
    }
  } catch (error) {
    isRequest.value = false;
  }
};

const viewDetail = (data: any) => {
  navTo("/withdrawal/detail", {
    data: JSON.stringify(data),
  });
};

onMounted(() => {
  getMyInvitList();
});
</script>

<template>
  <div class="page">
    <mHeader :lineShow="true" />
    <pageHeader>
      <template #title>{{ $t("MyTeam1") }}</template>
    </pageHeader>
    <div class="content">
      <VanList v-model="loading" :finished="finished" finishedText="">
        <div
          @click="viewDetail(item)"
          class="listItem"
          v-for="(item, index) in listData"
          :key="index"
        >
          <div>
            <div>{{ $t("MyTeam2") }}</div>
            <div style="margin-top: 10px">{{ $t("MyTeam3") }}</div>
            <div style="margin-top: 10px">{{ $t("MyTeam4") }}</div>
          </div>
          <div style="flex: 1" />
          <div>
            <div class="txtR">{{ item.username }}</div>
            <div style="margin-top: 10px" class="txtR">
              {{ item.betAmount }} USDT
            </div>
            <div style="margin-top: 10px" class="txtR">
              {{ $t("MyTeam5") }} {{ item.level }}
            </div>
          </div>
        </div>
      </VanList>
      <noData v-if="!loading && listData.length == 0">
        <template #desc>{{ $t("ZWSJ") }}</template></noData
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #1a2c38;
  .content {
    padding: 126 * $_ru 20 * $_ru 20 * $_ru 20 * $_ru;
    .listItem {
      margin-top: 1 * $_ru;
      overflow: hidden;
      background: #0f212e;
      display: flex;
      align-items: center;
      padding: 30 * $_ru;
      font-size: 24 * $_ru;
      color: #fff;
      border-bottom: 1 * $_ru solid #1a2c38;
      border-radius: 12 * $_ru;
      .txtS {
        font-size: 22 * $_ru;
        color: #999;
        margin-top: 6 * $_ru;
      }
      .txtL {
        text-align: left;
      }
      .txtR {
        text-align: right;
      }

      .icon {
        width: 28 * $_ru;
        height: 28 * $_ru;
      }
    }
  }
}
</style>